<template>
    <div class="catalogue-horizontal-container">
        <div class="course-catalogue">
            <p class="course-header">课程</p>
            <van-button class="course-toggle" @click="toggle()">目录<img class="toggle-icon" src="~@/assets/images/arrow-right.png" alt=""></van-button>
        </div>
        <ul class="catalogue-list">
            <li
                :class="['catalogue-item', {'active-catalogue-item': props.activeId === item.catalogueId}]"
                v-for="item in courseList"
                :key="item.catalogueId"
                @click="changeCatalogue(item)">
                <p class="type">
                    <img :src="imgSrc(item.tag ? item.tag : 'catalogue')" alt="" />
                    <span class="type-name">{{item.tag && item.tag === 'video' ? '视频' : '文档'}}</span>
                </p>
                <p class="name">{{item.catalogueName}}</p>
            </li>
        </ul>
        <div class="catalogue-popup-wrapper catalogue-bottom" v-show="state.wrapperShow">
            <van-popup
                v-model:show="state.visible"
                class="catalogue-popup"
                overlay-class="catalogue-popup-overlay"
                position="bottom"
                closeable
                @closed="onClosed"
            >
                <div class="catalogue-header">
                    <img class="icon" src="@/assets/images/menu-icon.png" alt="">
                    <span>目录</span>
                </div>
                <CatalogueList
                    class="catalogue-vertical-wrap"
                    ref="commentListRef"
                    :show-header="false"
                    :list="catalogueList"
                    @to-detail="changeCatalogue"/>
            </van-popup>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, reactive } from 'vue';
import {useRoute} from 'vue-router';
import CatalogueList from '@/views/detail/pane/catalogue.vue';
import scrollIntoView from 'smooth-scroll-into-view-if-needed'

const route = useRoute();

const emit = defineEmits(['change-catalogue']);

const props = defineProps({
    activeId: {
        type: [String, Number],
        default: '' 
    }
})

const state = reactive({
    wrapperShow: false,
    visible: false
})

const courseList = ref([]);

// 获取课件列表数据
function getCourseWareList() {
    G_transmit('courseWareList', {
        data: {
            courseId: route.query?.courseId,
            moocId: route.params.moocId
        }
    }).then(({data}) => {
        courseList.value = data || [];
    })
}

const fileTypes = ['video']
const imgs = {
    'others': require('@/assets/images/catalogue-icons/word@2x.png'),
    'video': require('@/assets/images/catalogue-icons/video@2x.png'),
}

function imgSrc(str) {
    return fileTypes.indexOf(str) === -1 ? imgs.others: imgs[str]
}

function changeCatalogue (item) {
    emit('change-catalogue', item.catalogueId)
}

function toggle(visible = !state.visible) {
    state.visible = visible;

    if (visible) {
        queryCatalogueTree();
        // zIndex.value = useGlobalZIndex();
        state.wrapperShow = true;
    }
}

function onClosed() {
    state.wrapperShow = false;
}

// 慕课目录课件信息
const catalogueList = ref([]);

// 获取慕课目录
function queryCatalogueTree() {
    G_transmit('moocCatalogue', {
            name: 'moocCatalogue',
            data: {
                courseId: route.query.courseId, // 6788208936748474369
                // pathDeep: 5,
                moocId: route.params.moocId
            }
        })
        .then((res) => {
            catalogueList.value = handleData(res.data);
        })
        .catch((err) => {
            console.log(err);
        })
        .finally(() => {
        })
}

// 处理目录数据
function handleData(data) {
    if ( !data.length ) return []
    data.forEach(item => {
        item.toggle = true 
        item.isToggle = true 
        if ( item.maxDeep > 1) {
            item.children.forEach(val => { 
                val.toggle = true 
                val.isToggle = true 
            })
        } 
    })
    return data
}

onBeforeMount(() => {
    getCourseWareList();
})

onMounted(() => {
    let timer = setTimeout(() => {
        let activeDom = document.getElementsByClassName('active-catalogue-item');
        if (activeDom && activeDom.length > 0) {
            scrollIntoView(activeDom[0], { behavior: 'smooth' })
        }
        clearTimeout(timer);
    }, 500)
})
</script>

<style lang="scss" scoped>
.catalogue-horizontal-container {
    width: 100%;
    overflow: hidden;
    padding: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    .course-catalogue {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 24px;
        .course-header {
            color: #171A1D;
            font-family: PingFangSC-Medium, PingFang SC;
            font-size: 15px;
            font-weight: 600;
        }
        .course-toggle {
            color: #6E7074;
            height: 15px;
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            .toggle-icon {
                width: 6px;
                height: 10px;
                margin-left: 4px;
            }
        }
    }
    .catalogue-list {
        margin-top: 11px;
        display: flex;
        width: 100%;
        overflow-x: auto;
        .catalogue-item {
            flex:0 0 135px;
            height: 72px;
            background-color: #F7F8FA;
            border-radius: 4px;
            cursor: pointer;
            .type {
                width: 40px;
                height: 18px;
                background: rgba(0, 0, 0, 0.4);
                border-radius: 4px 0px 4px 0px;
                color: #ffffff;
                display: flex;
                align-items: center;
                img {
                    width: 10px;
                    height: 10px;
                    margin-left: 4px;
                }
                .type-name {
                    display: inline-block;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    -webkit-transform-origin-x: 0; /*缩小后文字居左*/
                    -webkit-transform: scale(0.80);   /*关键*/
                    transform: scale(0.8);
                }
            }
            .name {
                font-size: 13px;
                line-height: 18px;
                margin: 8px 8px 0px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; //元素显示的文本的行数
                overflow: hidden;
                word-break: break-all;
            }
        }
        .catalogue-item:nth-child(n+2) {
            margin-left: 10px;
        }
        .active-catalogue-item {
            background: #E0F1FF;
            .type { 
                background: linear-gradient(270deg, #00BDFE 0%, #0084F6 100%);
            }
            .name {
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #0084F6;
            }
        }
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .catalogue-popup-wrapper {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 210px;
        overflow: hidden;
        z-index: 23;

        :deep(.catalogue-popup-overlay),
        :deep(.catalogue-popup) {
            position: absolute;
            height: 100%;
            overflow: hidden;
        }
        :deep(.van-popup__close-icon) {
            color: #000;
            font-size: 18px;
            margin-top: 3px;
        }

        .catalogue-header {
            font-size: 16px;
            line-height: 24px;
            font-weight: 600;
            color: #171A1D;
            display: flex;
            align-items: center;
            padding: 20px 15px 0;
            font-family: PingFangSC-Semibold, PingFang SC;
            .icon{
                width:16px;
                height:16px;
                margin-right: 4px;
            }
        }
        .catalogue-vertical-wrap {
            width: 100%;
            padding: 0 15px 0;
            height: calc(100% - 44px);
            overflow-y: auto;
        }
    }
}
</style>